<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3伸缩盒container</title>
    <style type="text/css">
        .article{
            display: flex;
            width: 600px;
            height: 100px;
            margin-bottom: 10px;
        }
        .nav{background-color: #999;}
        .section{background-color: #ccc;}
        .aside{background-color: #aaa;}
        #nav1{flex: 1;}
        #section1{flex: 3;}
        #aside1{flex:2;}
        #nav2{
            flex: 1 0 100px;
            order:1;}
        #section2{flex: 2 0 100px;}
        #aside2{flex:3 0 100px}
        #nav3{flex: 1 1 400px;}
        #section3{flex:1 2 400px;}
        #aside3{flex:1 2 400px;}
    </style>
</head>
<body>
<article class="article" id="article1">
    <nav class="nav" id="nav1">导航</nav>
    <section class="section" id="section1">内容</section>
    <aside class="aside" id="aside1">边栏</aside>
</article>
<article class="article" id="article2">
    <nav class="nav" id="nav2">导航</nav>
    <section class="section" id="section2">内容</section>
    <aside class="aside" id="aside2">边栏</aside>
</article>
<article class="article" id="article3">
    <nav class="nav" id="nav3">导航</nav>
    <section class="section" id="section3">内容</section>
    <aside class="aside" id="aside3">边栏</aside>
</article>
</body>
</html>